<template>
  <div class="w-full">
    <el-form :model="form" label-width="120px" :label-position="'top'">
      <el-form-item label="标题">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="题目个数">
        <el-input v-model="form.num" />
      </el-form-item>
      <el-form-item label="出题范围">
        <el-tree-select v-model="form.question_bank_group_id" :data="question_bank_groups" multiple
          :render-after-expand="false" check-strictly show-checkbox />
      </el-form-item>
      <el-form-item label="难度">
        <el-radio-group v-model="form.level">
          <el-radio :="lv" v-for="lv in level_options" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="题型范围">
        <el-checkbox-group v-model="form.question_types">
          <el-checkbox label="选择题" value="choice" />
          <el-checkbox label="填空题" value="fill" />
          <el-checkbox label="翻译题" value="translate" />
          <el-checkbox label="连线题" value="connect" />
        </el-checkbox-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang='ts'>

const question_bank_groups = ref([
  {
    value: 0,
    label: '所有',
    children: [],
  },
])

const level_options = ref([
  {
    label: '不限',
    value: 0
  },
  {
    label: '简单',
    value: 1
  },
  {
    label: '一般',
    value: 2
  },
  {
    label: '困难',
    value: 3
  },
])

const model = defineModel() as any;
const form = ref(model.value || {
  title: '',
  question_bank_group_id: null,
  level: 0,
  question_types: []
});
watch(() => form.value, (data) => {
  model.value = data;
}, {
  immediate: true,
  deep: true
})

</script>

<style></style>
